<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { TreeTransfer } from "@/components/TreeTransfer";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    bizType: 1,
    name: "",
    password: "",
    phone: "",
    roleIdList: [],
    managerStoreIdList: [],
    depositoryIdList: [],
    supplierIdList: []
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 选择门店
const titles = ref(["全部", "全部"]);
const changeChecked = (val, optFlat) => {
  if (optFlat === "md") {
    newFormInline.value.managerStoreIdList = val;
  } else if (optFlat === "ck") {
    newFormInline.value.depositoryIdList = val;
  } else {
    newFormInline.value.supplierIdList = val;
  }
};

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="90px"
    class="mr-[20px] min-h-[300px]"
  >
    <el-row>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="账号" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            autocomplete="new-password"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>

      <re-col
        v-if="newFormInline.title === '新增'"
        :value="12"
        :xs="24"
        :sm="24"
      >
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="newFormInline.password"
            type="password"
            autocomplete="new-password"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="角色" prop="roleIdList">
          <el-select
            v-model="newFormInline.roleIdList"
            placeholder="请选择"
            class="w-full"
            clearable
            multiple
          >
            <el-option
              v-for="(item, index) in newFormInline.roleOptions"
              :key="index"
              :value="item.id"
              :label="item.name"
            >
              {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="管理门店" prop="managerStoreIdList">
          <TreeTransfer
            :dataAll="newFormInline.storeOptions || []"
            :checkedIds="newFormInline.managerStoreIdList || []"
            :titles="titles"
            @changeChecked="changeChecked($event, 'md')"
          />
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="管理仓库" prop="depositoryIdList">
          <TreeTransfer
            :dataAll="newFormInline.depositoryOptions || []"
            :checkedIds="newFormInline.depositoryIdList || []"
            :titles="titles"
            :defaultProps="{ children: 'children', label: 'depositoryName' }"
            @changeChecked="changeChecked($event, 'ck')"
          />
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="管理供应商" prop="supplierIdList">
          <TreeTransfer
            :dataAll="newFormInline.supplierOptions || []"
            :checkedIds="newFormInline.supplierIdList || []"
            :titles="titles"
            :defaultProps="{ children: 'children', label: 'supplierName' }"
            @changeChecked="changeChecked($event, 'gys')"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
